<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background-color: #f5f5f5;
        }
        h3{
            width:1226px;
            height:58px;
            line-height:58px;
            font-weight: normal;
            margin:0 auto;
            font-size:22px;
            color:#333;
        }
        h3 span{
            float:right;
            font-size:16px;
            color:#424242;
        }
        .container{
            width:1226px;
            height:614px; 
            margin:0 auto;
            overflow: hidden;
        }
        .container>img{
            width:234px;
            height:614px;
            float:left;
        }
        ul{
            width:992px;
            height:614px;
            float:right;
        }
        li{
            list-style: none;
            width:234px;
            height:300px;
            padding:20px 0;
            box-sizing:border-box;
            background-color: #fff;
            text-align: center;
            font-size:14px;
            float:left;
            margin-left:14px;
            margin-bottom:14px;
        }
        li img{
            height:160px;
            width:160px;
        }
        li h4{
            color:#333;
            font-weight:normal;
            margin-bottom:2px;
        }
        li p{
            font-size:12px;
            color:#b0b0b0;
            margin-bottom:10px;
        }
        li span{
            color:#FF6700;
        }
        li:hover{
            transform: translateY(-2px);
            box-shadow: 0 2px 10px rgba(0,0,0,.15);
        }
    </style>
</head>
<body>
    <h3>手机<span>查看更多</span></h3>
    <div class="container">
        <ul>
            <li>
                <img src="img/02.webp" alt="">
                <h4>Xiaomi 13 Ultra</h4>
                <p>徕卡光学全焦段四摄| 一英寸可变光圈</p>
                <span>5999元起</span>
            </li>
            <li>
                <img src="img/02.webp" alt="">
                <h4>Xiaomi 13 Ultra</h4>
                <p>徕卡光学全焦段四摄| 一英寸可变光圈</p>
                <span>5999元起</span>
            </li>
            <li>
                <img src="img/02.webp" alt="">
                <h4>Xiaomi 13 Ultra</h4>
                <p>徕卡光学全焦段四摄| 一英寸可变光圈</p>
                <span>5999元起</span>
            </li>
            <li>
                <img src="img/02.webp" alt="">
                <h4>Xiaomi 13 Ultra</h4>
                <p>徕卡光学全焦段四摄| 一英寸可变光圈</p>
                <span>5999元起</span>
            </li>
            <li>
                <img src="img/02.webp" alt="">
                <h4>Xiaomi 13 Ultra</h4>
                <p>徕卡光学全焦段四摄| 一英寸可变光圈</p>
                <span>5999元起</span>
            </li>
            <li>
                <img src="img/02.webp" alt="">
                <h4>Xiaomi 13 Ultra</h4>
                <p>徕卡光学全焦段四摄| 一英寸可变光圈</p>
                <span>5999元起</span>
            </li>
            <li>
                <img src="img/02.webp" alt="">
                <h4>Xiaomi 13 Ultra</h4>
                <p>徕卡光学全焦段四摄| 一英寸可变光圈</p>
                <span>5999元起</span>
            </li>
            <li>
                <img src="img/02.webp" alt="">
                <h4>Xiaomi 13 Ultra</h4>
                <p>徕卡光学全焦段四摄| 一英寸可变光圈</p>
                <span>5999元起</span>
            </li>
        </ul>
    </div>
</body>
</html>